<template>
  <view class="article-list-page">
    <!-- 文章列表 -->
    <view 
      v-for="(article, index) in filteredArticles" 
      :key="index" 
      class="article-card" 
      @click="goToDetail(article.id)"
    >
      <image :src="article.cover" class="card-cover" mode="widthFix"></image>
      <view class="card-info">
        <text class="card-title">{{ article.title }}</text>
        <text class="card-summary">{{ article.summary }}</text>
        <view class="card-meta">
          <text class="meta-item">{{ article.date }}</text>
          <text class="meta-item">作者：{{ article.author }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      category: '', // 接收分类名称（如“技术”“生活”）
      // 文章数据（与首页保持一致，可复用或抽离为公共数据）
      articles: [
        { id: 1, category: '技术', title: 'Vue3新特性解析', summary: '深入讲解Vue3组合式API和响应式系统', cover: '/static/index/tech.jpg', date: '2024-03-15', author: '张三', views: 1200, likes: 200 },
        { id: 2, category: '生活', title: '周末家庭野餐', summary: '分享自制三明治和水果拼盘的制作方法', cover: '/static/index/picnic.jpg', date: '2024-03-14', author: '李四', views: 800, likes: 150 },
        { id: 3, category: '旅行', title: '大理七日游', summary: '记录苍山洱海的美丽风光和特色民宿', cover: '/static/index/travel.jpg', date: '2024-03-13', author: '王五', views: 1500, likes: 300 },
        { id: 4, category: '摄影', title: '人像摄影技巧', summary: '分享光线运用和构图方法', cover: '/static/index/photo.jpg', date: '2024-03-12', author: '赵六', views: 900, likes: 180 },
        { id: 5, category: '美食', title: '烘焙入门指南', summary: '戚风蛋糕和曲奇饼干的制作诀窍', cover: '/static/index/food.jpg', date: '2024-03-11', author: '孙七', views: 1000, likes: 220 },
        { id: 6, category: '读书', title: '经典书籍推荐', summary: '《平凡的世界》深度解读', cover: '/static/index/book.jpg', date: '2024-03-10', author: '周八', views: 700, likes: 160 }
      ]
    }
  },
  onLoad(options) {
    // 解码 URL 中的分类名称（处理特殊字符）
    this.category = decodeURIComponent(options.category);
  },
  computed: {
    filteredArticles() {
      if (this.category) {
        // 过滤对应分类的文章
        return this.articles.filter(article => article.category === this.category);
      }
      // 无分类时可返回全部文章（或提示“无数据”，根据需求调整）
      return this.articles; 
    }
  },
  methods: {
    goToDetail(id) {
      // 跳转到文章详情页（若未创建，需后续补充；当前可临时跳转到 edit 页，或新建 detail 页）
      uni.navigateTo({ url: `/pages/article/edit?id=${id}` }); 
      // 提示：若 edit 是“编辑页”，建议新建 detail 页作为“详情页”，此处仅为临时兼容
    }
  }
}
</script>

<style scoped>
.article-list-page {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding: 20rpx;
}
.article-card {
  background-color: white;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  transition: transform 0.2s;
}
.article-card:hover {
  transform: translateY(-4rpx);
}
.card-cover {
  width: 100%;
  max-height: 300rpx; /* 限制最大高度，避免拉伸 */
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  object-fit: cover; /* 保持图片比例，裁剪填充 */
}
.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}
.card-summary {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15rpx;
}
.card-meta {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}
.card-meta .meta-item {
  margin-right: 30rpx;
}
/* 响应式优化 */
@media (max-width: 768px) {
  .card-cover {
    max-height: 240rpx;
  }
}
</style>